<template>
  <div>
    <Card>
      <Tabs v-model="tabName" :animated="false" style="overflow: visible">
        <Form
          ref="sftForm"
          :model="sftForm"
          :label-width="130"
          label-position="right"
          :rules="shopValidate"
          @on-validate="formValidate"
          :disabled="formType === 'view'"
        >
          <TabPane label="收付通二级商户进件" class="tab" name="base">
            <template v-if="formType !== 'add'">
              <Row>
                <Col span="6">
                  <FormItem label="创建时间" prop="createTime">
                    <Input :value="detail.createTime" disabled />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="创建人" prop="createBy">
                    <Input :value="detail.createBy" disabled />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="更新时间" prop="updateTime">
                    <Input :value="detail.updateTime" disabled />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="更新人" prop="updateBy">
                    <Input :value="detail.updateBy" disabled />
                  </FormItem>
                </Col>
              </Row>
              <Divider orientation="left">审核信息</Divider>
              <Row>
                <Col span="6">
                  <FormItem label="总体状态" prop="status">
                    <Tag v-if="detail.status == 'FINISH'" color="success">已完结</Tag>
                    <Tag v-else-if="detail.status == 'REJECTED'" color="error">已驳回</Tag>
                    <Tag v-else-if="detail.status == 'AUDITING'" color="primary">审核中</Tag>
                    <Tag v-else-if="detail.status == 'CHECKING'" color="primary">资料验证</Tag>
                    <Tag v-else-if="detail.status == 'ACCOUNT_NEED_VERIFY'" color="warning"
                      >待商户验证</Tag
                    >
                    <Tag v-else-if="detail.status == 'NEED_SIGN'" color="warning">待签约</Tag>
                    <Tag v-else-if="detail.status == 'FROZEN'" color="blue">已冻结</Tag>
                    <Tag v-else-if="detail.status == 'CANCELED'" color="red">已作废</Tag>
                    <Tag v-else>未进件</Tag>
                  </FormItem>
                </Col>
                <template v-if="detail.status != '0'">
                  <Col span="6">
                    <FormItem label="申请时间" prop="applymentTime">
                      <Input :value="detail.applymentTime" disabled />
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="申请单号" prop="applymentId">
                      {{ detail.applymentId }}
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="二级商户号" prop="subMchid">
                      {{ detail.subMchid }}
                    </FormItem>
                  </Col>
                  <Col span="24" v-if="detail.status == 'REJECTED' || detail.status == 'FROZEN'">
                    <FormItem label="审核失败原因" prop="reason">
                      <Table
                        border
                        :data="JSON.parse(detail.auditDetail || '[]')"
                        :columns="[
                          { title: '参数名称', key: 'param_name', width: 150 },
                          { title: '驳回原因', key: 'reject_reason' },
                        ]"
                      ></Table>
                    </FormItem>
                  </Col>
                  <Col span="6">
                    <FormItem label="签约状态" prop="signState">
                      <Tag v-if="detail.signState == 'SIGNED'" color="success">已签约</Tag>
                      <Tag v-else-if="detail.signState == 'NOT_SIGNABLE'" color="error"
                        >不可签约</Tag
                      >
                      <Tag v-else>未签约</Tag>
                    </FormItem>
                  </Col>
                  <Col span="18">
                    <FormItem label="签约链接" prop="signUrl">
                      <Input :value="detail.signUrl" type="textarea" disabled />
                    </FormItem>
                  </Col>
                  <Col span="6"> </Col>
                  <Col span="18">
                    <FormItem label="法人验证链接" prop="legalValidationUrl">
                      <Input :value="detail.legalValidationUrl" type="textarea" disabled />
                    </FormItem>
                  </Col>
                  <template v-if="detail.status === 'ACCOUNT_NEED_VERIFY'">
                    <Divider orientation="left" size="small">汇款账户验证信息</Divider>
                    <Col span="24">
                      <Row>
                        <Col span="6">
                          <FormItem label="付款户名">
                            {{ JSON.parse(detail.accountValidation).account_name }}</FormItem
                          >
                        </Col>
                        <Col span="6">
                          <FormItem label="付款卡号">
                            {{ JSON.parse(detail.accountValidation).account_no }}
                          </FormItem>
                        </Col>
                        <Col span="6">
                          <FormItem label="汇款金额">
                            {{ JSON.parse(detail.accountValidation).pay_amount }}
                          </FormItem>
                        </Col>
                        <Col span="6">
                          <FormItem label="收款卡号">
                            {{ JSON.parse(detail.accountValidation).destination_account_number }}
                          </FormItem>
                        </Col>
                        <Col span="6">
                          <FormItem label="收款户名">
                            {{ JSON.parse(detail.accountValidation).destination_account_name }}
                          </FormItem>
                        </Col>
                        <Col span="6">
                          <FormItem label="开户银行">
                            {{ JSON.parse(detail.accountValidation).destination_account_bank }}
                          </FormItem>
                        </Col>
                        <Col span="6">
                          <FormItem label="省市信息">
                            {{ JSON.parse(detail.accountValidation).city }}</FormItem
                          >
                        </Col>
                        <Col span="6">
                          <FormItem label="备注信息">
                            {{ JSON.parse(detail.accountValidation).remark }}
                          </FormItem>
                        </Col>
                        <Col span="6">
                          <FormItem label="汇款截止时间">
                            {{ JSON.parse(detail.accountValidation).deadline }}</FormItem
                          >
                        </Col>
                      </Row>
                    </Col>
                  </template>
                </template>
              </Row>
            </template>
            <!-- 遮罩层  -->
            <div v-if="isRead" class="mask">只读不可修改</div>
            <Divider orientation="left">基本信息</Divider>
            <div>
              <FormItem label="店铺" prop="storeId">
                <Select
                  v-model="sftForm.storeId"
                  placeholder="输入关键字查询"
                  :remote-method="loadShopList"
                  filterable
                  clearable
                  style="width: 350px"
                  @on-clear="loadShopList"
                  @on-change="handleSelectShop"
                  :loading="shopLoading"
                >
                  <Option v-for="(item, index) in shops" :key="index" :value="item.id">{{
                    item.storeName
                  }}</Option>
                </Select>
              </FormItem>

              <FormItem label="商户简称" prop="bizContent.merchant_shortname">
                <Input
                  v-model="sftForm.bizContent.merchant_shortname"
                  clearable
                  style="width: 350px"
                />
                <div class="ivu-form-item-extra">
                  将在支付完成页向买家展示，需与商家的实际售卖商品相符
                </div>
              </FormItem>
              <FormItem label="主体类型" prop="bizContent.organization_type">
                <Select v-model="sftForm.bizContent.organization_type" style="width: 350px">
                  <Option value="2401" label="小微商户">
                    <div>小微商户</div>
                    <div style="color: #ccc">指无营业执照的个人商家</div>
                  </Option>
                  <Option value="2500" label="个人卖家">
                    <div>个人卖家</div>
                    <div style="color: #ccc">
                      指无营业执照，已持续从事电子商务经营活动满6个月，且期间经营收入累计超过20万元的个人商家。（若选择该主体，请在“补充说明”填写相关描述）
                    </div>
                  </Option>
                  <Option value="4" label="个体工商户">
                    <div>个体工商户</div>
                    <div style="color: #ccc">
                      体工商户，营业执照上的主体类型一般为个体户、个体工商户、个体经营
                    </div>
                  </Option>
                  <Option value="2" label="企业">
                    <div>企业</div>
                    <div style="color: #ccc">营业执照上的主体类型一般为有限公司、有限责任公司</div>
                  </Option>
                  <Option value="3" label="事业单位">
                    <div>事业单位</div>
                    <div style="color: #ccc">包括国内各类事业单位，如：医疗、教育、学校等单位</div>
                  </Option>
                  <Option value="2502" label="政府机关">
                    <div>政府机关</div>
                    <div style="color: #ccc">
                      包括各级、各类政府机关，如机关党委、税务、民政、人社、工商、商务、市监等
                    </div>
                  </Option>
                  <Option value="1708" label="社会组织">
                    <div>社会组织</div>
                    <div style="color: #ccc">
                      包括社会团体、民办非企业、基金会、基层群众性自治组织、农村集体经济组织等组织
                    </div>
                  </Option>
                </Select>
              </FormItem>
              <template
                v-if="
                  sftForm.bizContent.organization_type != '2401' &&
                  sftForm.bizContent.organization_type != '2500'
                "
              >
                <Divider orientation="left">营业执照/登记证书信息</Divider>
                <FormItem label="商户名称" prop="bizContent.business_license_info.merchant_name">
                  <Input
                    v-model="sftForm.bizContent.business_license_info.merchant_name"
                    clearable
                    style="width: 200px"
                  />
                </FormItem>
                <FormItem
                  label="营业执照注册号"
                  prop="bizContent.business_license_info.business_license_number"
                >
                  <Input
                    v-model="sftForm.bizContent.business_license_info.business_license_number"
                    clearable
                    style="width: 200px"
                  />
                </FormItem>
                <FormItem label="法人姓名" prop="bizContent.business_license_info.legal_person">
                  <Input
                    v-model="sftForm.bizContent.business_license_info.legal_person"
                    clearable
                    style="width: 200px"
                  />
                </FormItem>
                <FormItem label="注册地址" prop="bizContent.business_license_info.company_address">
                  <Input
                    v-model="sftForm.bizContent.business_license_info.company_address"
                    clearable
                    style="width: 200px"
                  />
                </FormItem>
                <FormItem label="营业期限" prop="bizContent.business_license_info.business_time">
                  <Input
                    v-model="sftForm.bizContent.business_license_info.business_time"
                    clearable
                    style="width: 200px"
                  />

                  <div class="ivu-form-item-extra">具体日期或长期，例：2014-01-01 或 长期</div>
                </FormItem>
                <FormItem label="营业执照扫描件" class="media.business_license_copy">
                  <Avatar
                    style="height: 100px; width: 100px"
                    v-if="sftForm.media.business_license_copy"
                    shape="square"
                    icon="ios-person"
                    size="default"
                    :src="sftForm.media.business_license_copy"
                  />
                  <div>
                    <Button @click="handleCLickImg('business_license_copy')" type="primary"
                      >选择图片</Button
                    >
                    <Button
                      @click="
                        uploadMedia('business_license_copy', sftForm.media.business_license_copy)
                      "
                      style="margin-left: 8px"
                      >上传微信</Button
                    >
                  </div>

                  <div class="ivu-form-item-extra">
                    如果是选择店铺新加载出来的数据需要手动点上传微信
                  </div>
                </FormItem>
              </template>
              <Divider orientation="left">经营者/法人身份证信息</Divider>
              <FormItem label="法人姓名" prop="bizContent.id_card_info.id_card_name">
                <Input
                  v-model="sftForm.bizContent.id_card_info.id_card_name"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem label="法人证件号" prop="bizContent.id_card_info.id_card_number">
                <Input
                  v-model="sftForm.bizContent.id_card_info.id_card_number"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem
                label="身份证开始时间"
                prop="bizContent.id_card_info.id_card_valid_time_begin"
              >
                <Input
                  v-model="sftForm.bizContent.id_card_info.id_card_valid_time_begin"
                  placeholder="例：2022-01-01"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem label="身份证结束时间" prop="bizContent.id_card_info.id_card_valid_time">
                <Input
                  v-model="sftForm.bizContent.id_card_info.id_card_valid_time"
                  placeholder="例：2022-01-01"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem label="身份证居住地址" prop="bizContent.id_card_info.id_card_address">
                <Input
                  v-model="sftForm.bizContent.id_card_info.id_card_address"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem label="身份证正面" class="media.id_card_copy">
                <Avatar
                  style="height: 100px; width: 100px"
                  v-if="sftForm.media.id_card_copy"
                  shape="square"
                  icon="ios-person"
                  size="default"
                  :src="sftForm.media.id_card_copy"
                />
                <div>
                  <Button @click="handleCLickImg('id_card_copy')" type="primary">选择图片</Button>
                  <Button
                    @click="uploadMedia('id_card_copy', sftForm.media.id_card_copy)"
                    style="margin-left: 8px"
                    >上传微信</Button
                  >
                </div>

                <div class="ivu-form-item-extra">
                  如果是选择店铺新加载出来的数据需要手动点上传微信
                </div>
              </FormItem>
              <FormItem label="身份证背面" class="media.id_card_national">
                <Avatar
                  style="height: 100px; width: 100px"
                  v-if="sftForm.media.id_card_national"
                  shape="square"
                  icon="ios-person"
                  size="default"
                  :src="sftForm.media.id_card_national"
                />
                <div>
                  <Button @click="handleCLickImg('id_card_national')" type="primary"
                    >选择图片</Button
                  >
                  <Button
                    @click="uploadMedia('id_card_national', sftForm.media.id_card_national)"
                    style="margin-left: 8px"
                    >上传微信</Button
                  >
                </div>

                <div class="ivu-form-item-extra">
                  如果是选择店铺新加载出来的数据需要手动点上传微信
                </div>
              </FormItem>

              <Divider orientation="left">超级管理员信息</Divider>
              <FormItem label="联系人姓名" prop="bizContent.contact_info.contact_name">
                <Input
                  v-model="sftForm.bizContent.contact_info.contact_name"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem label="联系人手机" prop="bizContent.contact_info.mobile_phone">
                <Input
                  v-model="sftForm.bizContent.contact_info.mobile_phone"
                  maxlength="11"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem label="联系人邮箱" prop="bizContent.contact_info.contact_email">
                <Input
                  v-model="sftForm.bizContent.contact_info.contact_email"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <Divider orientation="left">结算规则</Divider>

              <FormItem label="结算规则ID" prop="bizContent.account_info.settlement_id">
                <Input
                  v-model="sftForm.bizContent.account_info.settlement_id"
                  clearable
                  style="width: 200px"
                />
                <div class="ivu-form-item-extra">
                  若电商平台未传入，将默认选择0.6%费率对应的结算规则id，参见<a
                    target="_blank"
                    href="https://kf.qq.com/faq/220228qEfuAz220228bMFji6.html"
                    >https://kf.qq.com/faq/220228qEfuAz220228bMFji6.html</a
                  ><br />
                </div>
              </FormItem>
              <FormItem label="所属行业" prop="bizContent.settlement_info.qualification_type">
                <Input
                  v-model="sftForm.bizContent.settlement_info.qualification_type"
                  clearable
                  style="width: 200px"
                />
                <div class="ivu-form-item-extra">
                  若电商平台未传入，将默认填写无需特殊资质的行业名称，参见<a
                    target="_blank"
                    href="https://kf.qq.com/faq/220228qEfuAz220228bMFji6.html"
                    >电商二级商户结算规则对照表</a
                  ><br />
                </div>
              </FormItem>

              <Divider orientation="left">结算账户</Divider>
              <FormItem label="结算类型" prop="bizContent.account_info.bank_account_type">
                <RadioGroup
                  type="button"
                  button-style="solid"
                  v-model="sftForm.bizContent.account_info.bank_account_type"
                >
                  <Radio label="74">对公账户</Radio>
                  <Radio label="75">对私账号</Radio>
                </RadioGroup>
                <div class="ivu-form-item-extra">
                  1、若主体为企业/政府机关/事业单位/社会组织，可填写：74-对公账户。<br />
                  2、主体为小微/个人卖家，可选择：75-对私账户。<br />
                  3、若主体为个体工商户，可填写：74-对公账户、75-对私账户。<br />
                  示例值：75<br />
                </div>
              </FormItem>
              <FormItem label="银行账号" prop="bizContent.account_info.account_number">
                <Input
                  v-model="sftForm.bizContent.account_info.account_number"
                  clearable
                  style="width: 200px"
                />
                <!-- <a style="margin-left: 8px" @click="handleSearchBank">自动识别</a> -->
              </FormItem>
              <FormItem label="银行开户名" prop="bizContent.account_info.account_name">
                <Input
                  v-model="sftForm.bizContent.account_info.account_name"
                  clearable
                  style="width: 200px"
                />
              </FormItem>
              <FormItem
                label="银行开户行"
                prop="bizContent.account_info.account_bank"
                v-if="sftForm.bizContent.account_info.bank_account_type == '74'"
              >
                <Select
                  v-model="sftForm.bizContent.account_info.account_bank"
                  clearable
                  filterable
                  style="width: 200px"
                  @on-change="handleCorporateBanksChange"
                >
                  <Option
                    v-for="(item, index) in corporateBanks"
                    :value="item.bank_alias"
                    :key="index"
                    >{{ item.bank_alias }}</Option
                  >
                </Select>
                <div class="ivu-form-item-extra">例：招商银行</div>
              </FormItem>

              <FormItem
                label="银行开户行"
                prop="bizContent.account_info.account_bank"
                v-if="sftForm.bizContent.account_info.bank_account_type == '75'"
              >
                <Select
                  v-model="sftForm.bizContent.account_info.account_bank"
                  clearable
                  filterable
                  style="width: 200px"
                  @on-change="handlePersonalBanksChange"
                >
                  <Option
                    v-for="(item, index) in personalBanks"
                    :value="item.bank_alias"
                    :key="index"
                    >{{ item.bank_alias }}</Option
                  >
                </Select>
                <div class="ivu-form-item-extra">例：招商银行</div>
              </FormItem>
              <FormItem label="开户银行省市" prop="bank_address_code">
                <Cascader
                  v-model="sftForm.bank_address_code"
                  :data="provinceData"
                  :load-data="loadAreaData"
                  style="width: 200px"
                  @on-change="handleBankAddressChange"
                ></Cascader>
                <div class="ivu-form-item-extra"></div>
              </FormItem>
              <FormItem label="省市编码" prop="bizContent.account_info.bank_address_code">
                <Input
                  v-model="sftForm.bizContent.account_info.bank_address_code"
                  clearable
                  style="width: 200px"
                />
                <div class="ivu-form-item-extra">
                  最少精确到市级别，<a
                    href="https://pay.weixin.qq.com/wiki/doc/apiv3/download/%E7%9C%81%E5%B8%82%E5%8C%BA%E7%BC%96%E5%8F%B7%E5%AF%B9%E7%85%A7%E8%A1%A8.xlsx"
                    target="_blank"
                    >省市区编码对照表</a
                  >
                </div>
              </FormItem>
              <FormItem label="开户支行" prop="bizContent.account_info.bank_name" v-if="needBranch">
                <Select
                  v-model="sftForm.bizContent.account_info.bank_name"
                  clearable
                  style="width: 200px"
                  filterable
                  :placeholder="placeholder.bank_name || '请选择'"
                >
                  <Option
                    v-for="item in branches"
                    :value="item.bank_branch_name"
                    :key="item.bank_branch_id"
                    >{{ item.bank_branch_name }}</Option
                  >
                </Select>
                <div class="ivu-form-item-extra">需要先选择开户银行和省市</div>
              </FormItem>

              <Divider orientation="left">店铺信息</Divider>
              <Row>
                <Col span="6">
                  <FormItem label="店铺名称" prop="bizContent.sales_scene_info.store_name">
                    <Input v-model="sftForm.bizContent.sales_scene_info.store_name" clearable />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem label="店铺链接" prop="bizContent.sales_scene_info.store_url">
                    <Input v-model="sftForm.bizContent.sales_scene_info.store_url" clearable />
                  </FormItem>
                </Col>
                <Col span="6">
                  <FormItem
                    label="小程序AppID"
                    prop="bizContent.sales_scene_info.mini_program_sub_appid"
                  >
                    <Input
                      v-model="sftForm.bizContent.sales_scene_info.mini_program_sub_appid"
                      clearable
                    />
                  </FormItem>
                </Col>
              </Row>
            </div>
          </TabPane>
        </Form>
      </Tabs>
      <div align="center" v-if="formType !== 'view'">
        <Button type="success" @click="save(false)"> 保存 </Button>
        <Divider type="vertical"></Divider>
        <Button type="primary" @click="save(true)"> 提交 </Button>
        <!-- && status == '99'" -->
        <template v-if="formType == 'edit'">
          <Divider type="vertical"></Divider>
          <Button type="warning" @click="updateSettleRule()"> 只修改结算规则 </Button>
        </template>
      </div>
    </Card>

    <Modal width="1200px" v-model="picModalFlag">
      <ossManage @callback="callbackSelected" ref="ossManage" />
    </Modal>
  </div>
</template>

<script>
import ossManage from "@/views/sys/oss-manage/ossManage";
import {
  shopDetail,
  save,
  update,
  getShopListData,
  detail,
  updateSettleRule,
  provinces,
  cities,
  personalBanks,
  corporateBanks,
  branches,
  searchBank,
  upload,
} from "@/api/shops-sft";
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
import region from "@/views/lili-components/region";
import liliMap from "@/views/my-components/map/index";

export default {
  name: "shop-sft",
  components: {
    uploadPicInput,
    ossManage,
    region,
    liliMap,
  },

  data() {
    return {
      formType: this.$route.query.formType || "view",
      sftId: this.$route.query.id, // 店铺id
      isRead: false, // 是否只读，只有在店铺通过审核才可修改
      selectedFormBtnName: "", // 点击图片绑定form
      loading: false,
      picModalFlag: false, // 图片选择器
      tabName: "base", // tab栏name值
      tabNameList: ["base"], // tab栏name值数组
      shopValidate: {
        // 表单验证规则
        storeId: [{ required: true, message: "店铺不能为空" }],
        "bizContent.organization_type": [{ required: true, message: "请选择主体类型" }],
        "bizContent.merchant_shortname": [{ required: true, message: "商户简称不能为空" }],
        "bizContent.business_license_info.merchant_name": [
          { required: true, message: "请输入商户名称" },
        ],
        "bizContent.business_license_info.business_license_number": [
          { required: true, message: "请输入营业执照注册号" },
        ],
        "bizContent.business_license_info.business_license_copy": [
          { required: true, message: "请上传营业执照" },
        ],
        "bizContent.business_license_info.legal_person": [
          { required: true, message: "请输入法人姓名" },
        ],
        "bizContent.id_card_info.id_card_name": [{ required: true, message: "请输入法人姓名" }],
        "bizContent.id_card_info.id_card_number": [
          { required: true, message: "请输入法人身份证号" },
        ],
        "bizContent.id_card_info.id_card_valid_time_begin": [
          { required: true, message: "请选择身份证开始时间" },
        ],
        "bizContent.id_card_info.id_card_valid_time": [
          { required: true, message: "请选择身份证结束时间" },
        ],
        "bizContent.id_card_info.id_card_copy": [
          { required: true, message: "请上传法人身份证正面面照片" },
        ],
        "bizContent.id_card_info.id_card_national": [
          { required: true, message: "请上传法人身份证背面照片" },
        ],
        "bizContent.contact_info.contact_name": [{ required: true, message: "联系人姓名不能为空" }],
        "bizContent.contact_info.mobile_phone": [
          { required: true, message: "联系人手机号不能为空" },
          {
            type: "string",
            pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
            message: "手机号格式出错",
            trigger: "blur",
          },
        ],
        "bizContent.contact_info.contact_email": [
          { required: true, message: "邮箱不能为空" },
          { type: "email", message: "邮箱格式错误" },
        ],
        "bizContent.account_info.account_name": [{ required: true, message: "银行开户名不能为空" }],
        "bizContent.account_info.account_number": [{ required: true, message: "请输入银行账号" }],
        "bizContent.account_info.account_bank": [{ required: true, message: "请选择银行" }],
        "bizContent.account_info.bank_name": [{ required: true, message: "请选择支行" }],
        bank_address_code: [{ required: true, message: "开户行所在地-省不能为空" }],
        "bizContent.sales_scene_info.store_name": [{ required: true, message: "请输入店铺全称" }],
        "bizContent.sales_scene_info.store_url": [{ required: true, message: "请输入店铺链接" }],
      },
      sftForm: {
        storeId: "",
        media: {},
        bizContent: {
          account_info: { bank_account_type: "74" },
          business_license_info: {},
          contact_info: {},
          settlement_info: {},
          sales_scene_info: {
            store_name: "冠佩商城",
            store_url: "http://www.youabss.cn/",
          },
          id_card_info: {},
        },
      },
      shopLoading: true,
      shops: [],
      detail: {},
      picIndex: "", // 存储身份证图片下标，方便赋值
      provinceData: [],
      bankAliasCode: "",
      branches: [],
      banks: [],
      personalBanks: [],
      corporateBanks: [],
      placeholder: {},
    };
  },

  methods: {
    // 选择退货收件地址
    selectedConsigneeRegion(val) {
      this.$set(this.shopForm, "salesConsigneeAddressId", val[0].toString());
      this.$set(this.shopForm, "salesConsigneeAddressPath", val[1].toString().replace(/\s/g, ""));
    },
    // 选择图片modal
    handleCLickImg(val, index) {
      this.$refs.ossManage.selectImage = true;
      this.picModalFlag = true;
      this.selectedFormBtnName = val;
      this.picIndex = index;
    },
    // 图片回显
    async callbackSelected(val) {
      this.picModalFlag = false;
      let url = val.url;
      await this.uploadMedia(this.selectedFormBtnName, url);
      this.$nextTick(() => {
        if (this.picIndex === 0 || this.picIndex === 1) {
          this.sftForm.media[this.selectedFormBtnName][this.picIndex] = url;
        } else {
          this.sftForm.media[this.selectedFormBtnName] = url;
        }
        this.picIndex = "";
        this.$forceUpdate();
      });
    },
    async uploadMedia(btnName, url) {
      const msg = this.$Message.loading({
        content: "正在上传...",
        duration: 30,
      });
      try {
        const res = await upload(url);
        if (res.success) {
          switch (btnName) {
            case "business_license_copy":
              this.sftForm.bizContent.business_license_info.business_license_copy = res.result;
              break;
            case "id_card_copy":
              this.sftForm.bizContent.id_card_info.id_card_copy = res.result;
              break;
            case "id_card_national":
              this.sftForm.bizContent.id_card_info.id_card_national = res.result;
              break;
          }
        } else {
          url = "";
        }
      } catch (e) {
        this.$Message.error("上传失败");
        url = "";
      } finally {
        msg();
      }
    },
    // 初始化数据
    async init() {
      this.loadShopList();
      let me = this;
      provinces().then(res => {
        if (res.success) {
          me.provinceData = res.result.map(o => {
            return { value: o.province_code, label: o.province_name, children: [], loading: false };
          });
        }
      });
      personalBanks().then(res => {
        me.personalBanks = res.result;
      });
      corporateBanks().then(res => {
        me.corporateBanks = res.result;
      });
      if (this.sftId) {
        const res = await detail(this.sftId);
        const { result, success } = res;

        if (success) {
          const attr = JSON.parse(result.attr || "{}");
          this.sftForm = {
            ...result,
            bizContent: JSON.parse(result.bizContent),
            media: JSON.parse(result.media),
          };
          await this.handleSearchBank(false);
          if (attr) {
            if (attr.bank_address_code) {
              this.sftForm.bank_address_code = attr.bank_address_code || [];
              await this.handleBankAddressChange(attr.bank_address_code);
            }
          }
          this.detail = result;
        }
        // console.log(res);
      }
    },
    loadAreaData(item, callback) {
      item.loading = true;
      cities(item.value)
        .then(res => {
          if (res.success) {
            item.children = res.result.map(o => {
              return { label: o.city_name, value: o.city_code };
            });
          }
          item.loading = false;
          callback();
        })
        .catch(() => {
          item.loading = false;
          callback();
        });
    },
    formValidate(prop, status, error) {},
    async loadShopList(query = "") {
      this.shopLoading = true;
      try {
        const response = await getShopListData({ keyword: query });
        if (response.success) {
          this.shops = response.result;
        }
      } finally {
        this.shopLoading = false;
      }
    },
    handleSelectShop(value) {
      if (value) {
        this.$Modal.confirm({
          title: "提示",
          content: "<p>是否加载店铺已有信息并填充？</p>",
          onOk: () => {
            this.getShopDetail(value);
          },
          onCancel: () => {},
        });
      }
    },
    // 获取店铺详情
    async getShopDetail(shopId) {
      const res = await shopDetail(shopId);
      if (res.success) {
        const result = res.result;
        const { legalPhoto } = result;
        const legalPhotos = legalPhoto.split(",");
        try {
          this.sftForm.media.id_card_copy = legalPhotos[0];
          this.sftForm.media.id_card_national = legalPhotos[1];
        } catch (e) {}

        this.sftForm.media.business_license_copy = result.licencePhoto;
        // licencePhoto
        const bizContent = {
          merchant_shortname: result.storeName,
          account_info: {
            ...this.sftForm.bizContent.account_info,
            account_name: result.settlementBankAccountName,
            account_number: result.settlementBankAccountNum,
            // account_branch_name: result.settlementBankBranchName,
          },
          contact_info: {
            ...this.sftForm.bizContent.contact_info,
            contact_email: result.companyEmail,
            mobile_phone: result.linkPhone,
            contact_name: result.linkName,
          },
          //legalPhoto
          id_card_info: {
            ...this.sftForm.bizContent.id_card_info,
            id_card_copy: "",
            id_card_national: "",
            id_card_name: result.legalName,
            id_card_number: result.legalId,
          },
          business_license_info: {
            ...this.sftForm.bizContent.business_license_info,
            legal_person: result.legalName,
            merchant_name: result.companyName,
            company_address: result.companyAddress,
            business_license_number: result.licenseNum,
          },
        };
        this.sftForm.bizContent = {
          ...this.sftForm.bizContent,
          ...bizContent,
        };
        this.placeholder.bank_name = result.settlementBankBranchName;
      }
    },
    updateSettleRule() {
      this.$refs.sftForm.validate(async valid => {
        if (valid) {
          const params = {
            ...this.sftForm,
          };
          const { bizContent } = params;
          params.bizContent = JSON.stringify(bizContent);
          const res = await updateSettleRule(this.sftId, params);
          if (res.success) {
            this.$Message.success("编辑成功");
            this.$router.push({ name: "shopSft" });
          }
        } else {
          this.$Message.error("表单验证未通过，请检查");
        }
      });
    },
    // 保存
    save(isSubmit = false) {
      this.$refs.sftForm.validate(async valid => {
        if (valid) {
          const { bizContent, storeId, status, media, bank_address_code } = this.sftForm;
          const params = { bizContent, storeId, status };
          bizContent.contact_info.contact_type = "65";
          //   if (!bizContent.account_info.bank_address_code && bank_address_code) {
          //     bizContent.account_info.bank_address_code = bank_address_code[1] + "";
          //   }
          params.isSubmit = isSubmit;
          params.bizContent = JSON.stringify(bizContent);
          params.media = JSON.stringify(media);
          params.attr = JSON.stringify({ bank_address_code });
          if (this.formType == "edit") {
            const res = await update(this.sftId, params);
            if (res.success) {
              this.$Message.success("编辑成功");
              this.$router.push({ name: "shopSft" });
            }
          } else if (this.formType == "add") {
            const res = await save(params);
            if (res.success) {
              this.$Message.success("添加成功");
              this.$refs.sftForm.reset();
              this.$router.push({ name: "shopSft" });
            }
          }
        } else {
          this.$Message.error("表单验证未通过，请检查");
        }
      });
    },
    async handleSearchBank(autoSelect = true) {
      const accountNumber = this.sftForm.bizContent.account_info.account_number;
      let res = await searchBank(accountNumber);
      //   account_bank
      if (res.success && res.result) {
        this.banks = res.result;
        if (this.banks.length > 0 && autoSelect) {
          this.sftForm.bizContent.account_info.account_bank = this.banks[0].account_bank_code;
        }
      } else {
        this.$Message.error("未找到银行或银行账号不正确");
      }
    },
    async handleCorporateBanksChange(value) {
      if (value) {
        if (this.sftForm.bank_address_code) {
          const bank = this.corporateBanks.find(o => o.bank_alias == value);
          const res = await branches(bank.bank_alias_code, this.sftForm.bank_address_code[1]);
          if (res.success) {
            this.branches = res.result.data;
          }
        }
      }
    },
    async handlePersonalBanksChange(value) {
      if (value) {
        if (this.sftForm.bank_address_code) {
          const bank = this.personalBanks.find(o => o.bank_alias == value);
          const res = await branches(bank.bank_alias_code, this.sftForm.bank_address_code[1]);
          if (res.success) {
            this.branches = res.result.data;
          }
        }
      }
    },

    async handleBankAddressChange(value, selectedData) {
      if (value) {
        if (this.sftForm.bizContent.account_info.account_bank) {
          const banks =
            this.sftForm.bizContent.account_info.bank_account_type == "74"
              ? this.corporateBanks
              : this.personalBanks;
          const bank = banks.find(
            o => o.bank_alias == this.sftForm.bizContent.account_info.account_bank,
          );
          const res = await branches(bank.bank_alias_code, value[1]);
          if (res.success) {
            this.branches = res.result.data;
          }
        }
      }
    },
  },
  created() {
    this.init();
  },
  computed: {
    needBranch() {
      const banks =
        this.sftForm.bizContent.account_info.bank_account_type == "74"
          ? this.corporateBanks
          : this.personalBanks;
      const bank = banks.find(
        o => o.bank_alias == this.sftForm.bizContent.account_info.account_bank,
      );
      if (bank) {
        return bank.need_bank_branch;
      }
      return false;
    },
  },
};
</script>
<style lang="scss" scoped>
.selectedMember {
  width: 100%;
}

.mask {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(105, 105, 105, 0.1);
  z-index: 9;
}

/deep/ .ivu-tabs-bar {
  margin: 0;
}

.tab {
  padding: 16px;
  position: relative;
}

.categories-checkbox {
  display: flex;
  align-items: center;
}

.img {
  margin-right: 10px;
  width: 100px;
  height: 100px;
}

.item {
  width: 350px !important;
  display: flex;

  > * {
    margin: 0 4px;
  }
}
.legal-photo {
  width: 100px;
  height: 100px;
  cursor: pointer;
}
</style>
